<template>
	<view class="login-wrap white-content">
		<view class="content">
			<image class="logo" src="/static/logo.png"></image>
			<view class="title">{{appName}}</view>
			<tn-form :model="form" ref="form" :errorType="['toast']">
				<tn-form-item prop="username" :borderBottom="false">
					<tn-input ref="usernameRef" type="text" class="inputStyle" :height="80" v-model="form.username" placeholder="请输入账号" />
				</tn-form-item>
				<tn-form-item prop="name" :borderBottom="false">
					<tn-input type="password" :height="80" :clearable="false" class="inputStyle" v-model="form.password" placeholder="请输入密码" />
				</tn-form-item>
				<!-- <view class="tips">未注册的手机号验证后自动创建账号</view> -->
			</tn-form>
			<tn-button @tap="login" class="common-button login-button">登录</tn-button>
			<text v-if="canUniverifyLogin" @tap="univerifyLogin" class="univerifyLogin">本机号码一键登录</text>
		</view>
	</view>
</template>

<script>
	import { univerifyLogin } from './mixins/univerify.js';
	import { login, getUserInfo } from '@/api/common/auth';
	import md5 from 'js-md5';
	export default {
		mixins: [univerifyLogin],
		data() {
			return {
				form: {
					username: '',
					password: '',
				},
				code: '',
				appName: '',
				rules: {
					username: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		onLoad() {
			this.appName = process.env.VUE_APP_NAME;
		},
		mounted() {
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		onBackPress() {
			return true;
		},
		computed: {},
		methods: {
			login() {
				this.$refs.form.validate(valid => {
					if (valid) {
						let loginBody = {
							username: this.form.username,
							password: md5(this.form.password),
							deviceType: 'test'
						}
						login(loginBody).then(res => {
							if (res.code == 200) {
								this.$tn.vuex('vuex_token', res.result.tokenValue);
								this.$tn.vuex('vuex_login_flag', true);
								uni.$tn.message.toast(res.msg);
								getUserInfo().then(resUser => {
									this.$tn.vuex('vuex_user', resUser.result);
									this.$common.navigateTo('/pages/index');
									return;
								})
							}

						}).finally(res => {})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.login-wrap {
		font-size: 28rpx;
		height: 100%;

		.content {
			width: 600rpx;
			margin: 0rpx auto 0;
			padding-top: 180rpx;
			display: flex;
			flex-direction: column;

			.logo {
				height: 160rpx;
				width: 160rpx;
				margin: 0 auto;
			}

			.title {
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 40rpx;
				margin-bottom: 100rpx;
				letter-spacing: 10rpx;
			}

			.tips {
				margin-bottom: 60rpx;
				margin-top: 20rpx;
			}

			.inputStyle {
				background-color: #f2f2f2;
				border-radius: 5px;
				padding: 0px 14rpx !important;
			}

			.login-button {
				margin-top: 20rpx;
				letter-spacing: 20rpx;
				font-size: 30rpx !important;
				letter-spacing: 20rpx;
				border-radius: 10rpx;
			}
			.univerifyLogin {
				text-align: center;
				font-size: 30rpx;
				color: #656565;
				margin-top: 40rpx;
			}
		}
	}
</style>